<template>
  <x-form :ref="getProps.params.name" class="ad-template-select" :model="getProps.params">
    <n-form-item prop="default">
      <n-checkbox v-model:value="checked" @update:checked="onChange">{{ getProps.params.description }}</n-checkbox>
    </n-form-item>
  </x-form>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import XForm from '@/components/x-form/index.vue'
  import { NFormItem, NCheckbox } from 'naive-ui'
  import { computed, onMounted, reactive, ref } from 'vue'
  import { useStore } from '@/store'
  const store = useStore()
  const props = defineProps({
    params: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const emit = defineEmits(['change'])
  const isEdit = computed(() => {
    return !!store.state.intelligent.data.id
  })

  const checked = ref(false)
  onMounted(() => {
    if (isEdit.value) {
      if (
        getProps.params.field_type === 'FIELD_TYPE_BOOLEAN' &&
        Object.prototype.toString.call(getProps.params.default) !== '[object Boolean]'
      ) {
        getProps.params.default = false
      }
      checked.value = getProps.params.default
    } else {
      getProps.params.default = false
      checked.value = false
    }
  })
  // 切换选项
  function onChange(val) {
    getProps.params.default = val
    emit('change', val)
  }
  // 校验
  function validate() {
    return new Promise((resolve, reject) => {
      resolve({
        [getProps.params.name]: getProps.params.default
      })
    })
  }
  defineExpose({
    validate
  })
</script>

<style scoped lang="scss"></style>
